<template>
  <div class="box">
    <One v-if="active == 1"></One>
    <Two v-if="active == 2"></Two>
    <Three v-if="active == 3"></Three>
    <Four v-if="active == 4"></Four>
  </div>
</template>

<script lang="ts" setup>
import One from "@/components/common/loserReg/one.vue";
import Two from "@/components/common/loserReg/two.vue";
import Three from "@/components/common/loserReg/three.vue";
import Four from "@/components/common/loserReg/four.vue";
import { provide, ref } from "vue";

const active = ref(1);
provide('active',active)
</script>

<style lang="less" scoped>
.box {
  width: 80%;
  // background-color: pink;
  margin: 100px auto;
  border-radius: 10px;
  box-shadow: 0 0 5px 5px #eee;
}
</style>
